<template>
	<view class="content">
		<!-- 调用轮播分页器的样式组件 -->
		<uni-swiper-dot  :info="banner" :current="current"  mode="round" 
		:dotsStyles="{backgroundColor: 'rgba(0,0,0,0.5)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: '#ffffff',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'}">
			<swiper class="swiper-box" @change="change"  :autoplay="true" interval="2000">
				<swiper-item v-for="(item ,index) in banner" :key="index">
					<view >
						<image :src="item" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 选项卡商品区域 -->
		<u-sticky bgColor="#fff" >
		    <u-tabs :list="indexTabs"
			:scrollable="false"
			:current='currentIndex'
			 lineWidth="30"
			        lineColor="#f56c6c"
			        :activeStyle="{
			            color: '#ff0000',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }"
			        :inactiveStyle="{
			            color: '#090000',
			            transform: 'scale(1)'
			        }"
			        itemStyle="border-bottom: 1px solid #ddd; height: 50px;" @click="getGoods">
					</u-tabs>
		  </u-sticky>
		
		
	<!-- 调用子组件 -->
	 <good-list :list="goods"></good-list>
	 
	<view class="empty">
		<u-empty :show="isShow" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png" >
	 </u-empty>
	</view>
	 <view class="status" v-if="status"><u-loadmore status="loading"/></view>
	 <image v-if="tops == true" @click="top()" class="view_top" src="../../static/dingbu.png"/>
</view>
</template>

<script >
//引入请求文件
import{apiBanner,apiIndexTabs ,apiGoods} from '../../api/mock'
	export default {
		data() {
			return {
				current: 0,
				banner:[], //轮播图片地址
				indexTabs:[], //选项卡名称
				goods:[],
				isShow:false,
				status:false,
				tops:false,
				currentIndex:0,
				p:1, //当前页码
				num:6, //每页条数
			}
		},
		onLoad() {
			uni.showLoading({
				title:'启动中...',
				mask:true,
			})
			//当页面加载完成后，请求各类数据
			this.anima;
			this.getBanner();
			this.getIndexTabs();
			//bug：由于请求返回需要1秒。为了顺利获取数据设置定时器2秒后在执行该函数
			setTimeout(()=>{
				this.getGoods({index:0})
			},1100)
		},
		/*下拉重置整个页面:重置data函数初始化；页面数据重新发起请求*/
		onPullDownRefresh() {
			setTimeout(()=>{
				//提示弹窗
				uni.showToast({
					icon:'success',
					title:'刷新成功'
				})
				//关闭下拉
				uni.stopPullDownRefresh();
				this.currentIndex = 0;
				this.p = 1;
				this.getBanner();
				this.getIndexTabs();
				this.getGoods({index:0})
			},1000)
		},
		//触底——添加商品的下一页
		onReachBottom() {
			this.status=true;
			this.p++; //每次触底页码自增
			//根据最近一次的选项卡改变事件中，获取的选项卡下标，提取出来名称
			let tabname = this.currentIndex == 0?'全部':this.indexTabs[this.currentIndex].name;
			//获取触底后的页码对应的数据
			apiGoods(this.p, this.num, tabname).then((res)=>{
				this.status = false;
				this.goods = [...this.goods,...res.list];
				console.log(this.goods);
			if(this.goods.length == 0){
				this.isShow = true;
			}
			}).catch((err)=>{
				console.log(err);
			})
		},
		onPageScroll(e) {
			this.tops = false;
			if(e.scrollTop>150){
				this.tops = true;
			}
			
		},
		methods: {
			top(){
				uni.pageScrollTo({
					scrollTop:0,
				})
			},
			//选项卡的改变事件；永远只拿第一页的数据
			getGoods(e){
				this.currentIndex = e.index;
				let tabname = this.indexTabs[e.index].name;
				this.isShow = false;
				this.goods=[];
				this.status = true;
				this.p =1;
				apiGoods(this.p, this.num, tabname).then((res)=>{
					this.status = false;
					this.goods = res.list;
					console.log(this.goods);
				if(this.goods.length == 0){
					this.isShow = true;
				}
				}).catch((err)=>{
					console.log(err);
				})
				
			},
			// 轮播改变事件
			change(e) {
				this.current = e.detail.current;
				
			},
			//调用请求轮播数据
			getBanner(){
				apiBanner('asc').then((res)=>{
					uni.hideLoading();
					this.banner = res;
					console.log(res);
				}).catch((err)=>{
					console.log(err);
				})
			},
			getIndexTabs(){
				apiIndexTabs().then((res)=>{
					this.indexTabs = res;
				}).catch((err)=>{
					console.log(err);
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
	}
	.swiper-box{
		background-color: skyblue;
	}
	.swiper-box image{
		width: 100%;
	}
	.tabs{
		width: 100%;
		overflow: hidden;
	}
	.empty{
		width: 100%;
	}
	.status{
		width: 100%;
	}
	.view_list{
		width: 100%;
	}
.view_top{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: fixed;
	top: 70%;
	right: 5%;
}
</style>
